import React, { Component } from 'react';

class Draw extends Component {
    //声明状态
    state = {
        r:0,
        g:0,
        b:0,
        a:1
    }

    //保存颜色 方法
    saveColor = (type) => {
        return (e) => {
            //更新数据
            this.setState({
                [type]:e.target.value
            })
        }
    }


    render() {
        //解构赋值
        let {r,g,b,a} = this.state;
        return (
            <div style={{width:300,margin:"20px auto"}}>
                <div style={{width:300,height:300,border:"1px solid red",background:`rgba(${r},${g},${b},${a})`}}></div>
                R:<input onChange={this.saveColor("r")}  value={r} type="range" min={0} max="255"  /><br /><br />
                G:<input onChange={this.saveColor("g")} value={g} type="range" min={0} max="255"  /><br /><br />
                B:<input onChange={this.saveColor("b")} value={b} type="range" min={0} max="255"  /><br /><br />
                A:<input onChange={this.saveColor("a")} value={a} type="range" min={0} max={1} step={0.1} /><br /><br />

            </div>
        );
    }
}

export default Draw;